<template>
	<view class="address">
		<base-navbar back-color="#fff" title="收款账户"></base-navbar>
		<view class="card-list">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="user" @click="selectAccount(item)">
					<text class="name">{{item.bank_name}}</text>
					<text class="phone">{{item.username}}</text>
				</view>
				<view class="area">{{item.account}}</view>
				<view class="other">
					<label class="check" @click="chooseDefault(item)">
						<radio class="radio" :checked="item.is_default" :color="themeColor.theme" />
						<text class="label">默认提现</text>
					</label>
					<view class="actions">
						<view class="item" @click="pageRoute('/pages/users/withdraw/account-form?account_id='+item.id)">
							<uni-icons type="compose" size="24" color="#909193"></uni-icons>
							<text class="label">编辑</text>
						</view>
						<view class="item" @click="delAccount(item)">
							<uni-icons type="trash" size="24" color="#909193"></uni-icons>
							<text class="label">删除</text>
						</view>
					</view>
				</view>
			</view>

			<c-button :style="{background: themeColor.theme}" block
				@click="pageRoute('/pages/users/withdraw/account-form')">+添加账户</c-button>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		list: [],
		type: ""
	});

	onLoad((opt) => {
		if (!checkLogin()) {
			uni.showModal({
				title: '提示',
				content: '请先授权登录',
				success: function(res) {
					uni.reLaunch({
						url: "/pages/users/login/login"
					})
				}
			});
		}
		if (opt.hasOwnProperty('type')) {
			state.type = opt.type;
		}
		getAccountList()

	});

	function getAccountList() {
		request.get('memberpayment/getAccountList').then(res => {
			console.log('银行卡列表', res);
			state.list = res.data
		})
	}

	function selectAccount(item) {
		if (state.type == 'select') {
			uni.$emit('select_account', {
				account_id: item.id
			})
			uni.navigateBack({
				delta: 1
			})
		}
	}

	function chooseDefault(item) {
		let is_default = 1;
		if (item.is_default) {
			is_default = 0;
		} else {
			is_default = 1;
		}
		console.log('修改默认体现卡', is_default);

		request.post('memberpayment/changeDefault', {
			id: item.id,
			is_default: is_default,
		}).then(res => {
			if (res.code == 1) {
				uni.showToast({
					title: res.msg,
					icon: 'success'
				});
				getAccountList();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error'
				});
			}
		})
	}

	function delAccount(item) {
		request.delete('memberpayment/delAccount', {
			id: item.id,
		}).then(res => {
			if (res.code === 1) {
				uni.showToast({
					title: res.msg,
					icon: 'success'
				});
				getAccountList();
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error'
				});
			}
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}
	const {
		themeColor,
		list,
		type
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}

	.address {
		padding: $margin-24 $margin-24;
		box-sizing: border-box;

		.card-list {
			min-height: 91vh;
			padding: $margin-24;
			background-color: $bg-inverse-color;
			border-radius: $radius-16;
			box-sizing: border-box;

			.card {
				padding: $margin-24 0;
				border-bottom: 1rpx solid mix($inverse-color, $border-color, 20%);

				&:last-of-type {
					border-bottom: none;
				}

				.user {
					display: flex;
					align-items: center;
					padding: $margin-24 0;

					.name {
						font-size: $font-32;
						color: $main-color;
					}

					.phone {
						margin-left: $margin-12;
					}
				}

				.area {
					padding: $margin-4 0;
					font-size: $font-24;
					color: $tips-color;
				}

				.other {
					@include f-between;
					padding: $margin-24 0;

					.check {
						@include f-center;
						line-height: 1;

						.radio {
							transform: scale(0.8);
						}
					}

					.actions,
					.actions .item {
						@include f-center;
						line-height: 1;
					}

					.actions .item {
						margin-left: $margin-20;
					}

					.label {
						margin-left: $margin-4;
						font-size: $font-24;
					}
				}
			}

			.c-button {
				// margin-top: $margin-36;
			}
		}
	}
</style>